<template>
  <view>
    <view class="gg-icon-head">
      <gg-search v-model="publicParam.keyword" />
      <view>
        <gg-switch :label=" checked?'显示代码':'显示名称'" v-model="checked" labelWidth="200" />
      </view>
    </view>
    <gg-tab-lists :tabsConfig="tabsConfig" :tabIndex="tabIndex" @change="onChange" :publicParam="publicParam" :publicFunc="getIcons"
      :style="tabListHeight">
      <template #default="{rows}">
        <gg-block col="4">
          <view class="icons-box" @click="switchActive(rows)">
            <view class="icons-main">
              <gg-icons :type="rows.name" color="#999" size="30" />
            </view>
            <view class="icons-text"><text class="icon-item-text">{{ checked? rows.unicode: rows.name }}</text></view>
          </view>
        </gg-block>
      </template>
    </gg-tab-lists>
  </view>
</template>
<script>
import iconsAll from './gg-iconfont'
import copy from './uni-copy'
import ggIcons from '@/components/gg-icons/gg-icons'
import ggBlock from '@/components/gg-block/gg-block'
export default {
  components: {
    ggBlock, ggIcons
  },
  data() {
    return {
      tabsConfig: [
        { tabTitle: '全部', apiFunc: this.getIcons, apiParam: { type: 'all' } },
        { tabTitle: '基础', apiFunc: this.getIcons, apiParam: { type: 'base' } },
        { tabTitle: '箭头', apiFunc: this.getIcons, apiParam: { type: 'arrow' } },
        { tabTitle: '状态', apiFunc: this.getIcons, apiParam: { type: 'status' } },
        { tabTitle: '钱包', apiFunc: this.getIcons, apiParam: { type: 'wallet' } },
        { tabTitle: '订单', apiFunc: this.getIcons, apiParam: { type: 'order' } },
        { tabTitle: '行为', apiFunc: this.getIcons, apiParam: { type: 'action' } },
        { tabTitle: '人物', apiFunc: this.getIcons, apiParam: { type: 'people' } },
        { tabTitle: '媒体', apiFunc: this.getIcons, apiParam: { type: 'media' } },
        { tabTitle: '商城', apiFunc: this.getIcons, apiParam: { type: 'mall' } },
      ],
      checked: false,
      tabIndex: 0,
      publicParam: {},
      tabListHeight: 'background-color:#fff;'
    };
  },
  mounted() {
    this._dealStyle();
  },
  methods: {
    _dealStyle() {
      /* 让组件高度使用 可使用窗口高度 减去组件介绍高度 剩余的部分   也就是说不想让页面显示滚动条 */
      uni.getSystemInfo({
        success: (res) => {
          uni.createSelectorQuery().in(this).select('.gg-icon-head').boundingClientRect((data) => {
            this.tabListHeight = 'height:' + (res.windowHeight - data.height) + 'px;background-color:#fff;'
          }).exec();
        }
      })
    },
    getIcons(params) {
      return new Promise((resolve, reject) => {
        let data = [];
        /* 模拟请求500毫秒拿到数据 */
        if (params.page > 1) {
          resolve({ data: data });
        } else {
          let keyword = params.keyword, iconClassList = [], loalicons = []
          switch (params.type) {
            case 'arrow':
              loalicons = iconsAll.iconsArrow;
              break;
            case 'wallet':
              loalicons = iconsAll.iconsWallet;
              break;
            case 'status':
              loalicons = iconsAll.iconsStatus;
              break;
            case 'base':
              loalicons = iconsAll.iconsBase;
              break;
            case 'order':
              loalicons = iconsAll.iconsOrder;
              break;
            case 'action':
              loalicons = iconsAll.iconsAction;
              break;
            case 'people':
              loalicons = iconsAll.iconsPeople;
              break;
            case 'media':
              loalicons = iconsAll.iconsMedia;
              break;
            case 'mall':
              loalicons = iconsAll.iconsMall;
              break;
            case 'all':
              for (const key in iconsAll) {
                loalicons = loalicons.concat(iconsAll[key])
              }
              break;
          }
          if (keyword) {
            for (const key in loalicons) {
              if (loalicons[key].name.indexOf(keyword) != -1) {
                iconClassList.push(loalicons[key]);
              }
            }
          } else {
            iconClassList = loalicons;
          }
          data = iconClassList;
          resolve({ data: data });
        }
      })

    },
    switchActive(item) {
      copy({
        content: item[this.checked ? 'unicode' : 'name'],
        success: (e) => {
          uni.showToast({
            title: e,
            duration: 2000,
            icon: 'none'
          });
        }
      })
    },
    onChange(e) {
      this.tabIndex = e;
    }
  }
}
</script>
<style >
.icons-box {
  overflow: auto;
  padding: 10px 0;
}
.icons-main {
  text-align: center;
}
.icons-text {
  font-size: 12px;
  color: #999;
  text-align: center;
}
</style>